<template>
  <main>

    <div class="dg-tab am-margin-bottom">
      <ul class="dg-center">
        <li class="dg-text-gray am-text-lg"><span class="dg-active">首页推荐</span></li>
        <li class="dg-text-gray am-text-lg"><span>作品推荐</span></li>
      </ul>
    </div>

    <div class="max-width-1400 am-center">
      <div class="am-g">
        <section class="am-u-sm-12 am-u-md-4 am-u-lg-3 dg-work am-margin-bottom"
          v-for='(works, index) in worksData' :key="index"
          @mouseleave="operPanel(works, false)">
          <!-- 图片 -->
          <div class="dg-img">
            <div @click="actionWorksDetail(works.worksID)">
              <am-image custom-class="am-img-responsive am-center"
              :responsive="true" v-lazy="thumbnail + works.mainPic" :src="''" alt="" />
              <div class="dg-blur-img" :style="{'background-image': `url(${ thumbnail + works.mainPic })`}"></div>
            </div>
          </div>

          <!-- 详情 -->
          <div class="dg-work-detail am-padding-sm">
            <h2 class="am-inline">{{ works.worksName }}</h2>
            <p class="am-inline am-fr">
              <i class="am-icon-eye">&nbsp;{{ works.clicksNum }}</i>
              <i class="am-icon-thumbs-o-up">&nbsp;{{ works.poll }}</i>
            </p>
          </div>

          <!-- 作者 -->
          <div class="dg-work-dsg am-padding-xs am-cf">
            <span class="am-fl" @mouseenter="operPanel(works, true)">
              <!-- <img src="/static/2.jpg" class="am-circle am-margin-right-xs" alt=""> -->
              <img v-lazy="static_pic + works.headImagePath" class="am-circle am-margin-right-xs" alt="">
              {{ works.designerName }}
            </span>
            <span class="am-fr am-margin-top-xs" :title="`审核通过时间：${ works.cfmdate } - 创建时间：${ works.createdOn }`">{{ works.TimeDif }}</span>
            <dsg-overview v-if="works.isShowPanel" @operPanel="operPanel(works, false)"
            v-bind="{
              headimgPath: static_pic + works.headImagePath,
              dsgName: works.designerName,
              place: works.provinceName + ' ' + works.cityName,
              worksNum: works.worksNumber,
              storeName: works.storeName
            }" />
          </div>
        </section>
        <div class="am-u-end"></div>
      </div>
    </div>
  
    <!--分页组件-->
    <v-pagination :total="total" :current-page='current' @pagechange="pagechange" :display="display"></v-pagination>
  </main>
  
</template>

<script>
import VPagination from '@/dg_components/pagination'
import DsgOverview from '@/dg_components/DsgOverview'


export default {
  name: 'home-works-list2',
  data() {
    return {
      worksData: [],// 作品数据
      total:0,     // 记录总条数
      display:16,   // 每页显示条数
      current: 1,   // 当前的页数
    }
  },
  components: {
    VPagination, DsgOverview
  },
  computed: {
    /**单一状态 */
    gameID() {
       return this.$store.getters.gameID;
      //return gameID=5;
    }
  },
  methods: {
    ready() {
      this.loadWorks(false);
    },
    actionWorksDetail(onworksID) {
      //console.log("******************"+onworksID);
      this.worksClicks(onworksID);//跳转之前执行点击量增加,执行完后才跳转<code>/cart</code>
      this.$router.push('/worksDetail/'+onworksID)
    },
    //点击量
    worksClicks(onworksID) {
      this.dgpost(this.api.CLICKWORKS, {
        worksID: +onworksID,
      }).then(res => {

      }).catch(err => {
        this.alertMsg = err.msg;
      });
    },
    loadWorks() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETHOMEWORKSLISTBYMPAGE, {
          type:0,
          tagID:'',
          gameID: +this.gameID,
          pageNum:	+this.current,
          numPerPage: +this.display,
        }).then(res => {
          // this.page.res = res.data.data.page;
          this.worksData = res.data.data.work;

          /**
           * 添加设计师概览显示板属性
           */
          this.worksData.forEach(item => {
            this.$set(item, 'isShowPanel', false);
          });


          this.total=res.data.data.page.total;
          if(this.total === 0) { this.total = 1 }
        });
      });
    },
    pagechange(currentPage){ //分页点击
      this.current = currentPage;
      // console.log(this.total+"************");
      this.loadWorks();
    },


    /**
     * @description - 定时器效果
     * 
     * TODO:
     * - 显示板延时显示
     * - 高频率触发setTimeout会注册多次事件
     */
    operPanel(item, flag = false) {
      item.isShowPanel = flag;
      // if(flag) {
      //   setTimeout(() => {
      //     item.isShowPanel = true;
      //   }, 299);
      // } else {
      //   item.isShowPanel = false;
      // }

    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style lang="less" scoped>
@max640: ~"screen and (max-width: 640px)";

@media @max640 {
}

.dg-work {
  position: relative;
  img {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
}

.dg-work-detail {
  background-color: #FFFFFF;
  border-bottom: 1px solid rgb(156, 155, 155);
  p {
    margin: 5px 0;
    color: #8A8A8A;
    i {
      padding:0 5px;
    }
  }
}

.dg-work-dsg {
  background-color: #FFFFFF;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  span:last-of-type { color: #8A8A8A; }
  img {
    max-width: 35px;
    min-height: 35px;
  }
}

.dg-img {
  position: relative;
  img { width: 100%; }
}
.dg-tab {
  position: relative;
  z-index: -1;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: #FFF;
  box-shadow: 0 1px 5px #F0F0F0;
  //top:350px;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      float: left;
      padding: 0 15px;
      cursor: pointer;
      span {
        padding-bottom: 3px;
        position: relative;
        bottom: -15px;
      }
    }
  }
}

.dg-active {
  color: #717171;
  border-bottom: 3px solid #717171;
  
}

.dg-center {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
 // top:-170px;
}

</style>